<template>
    <div>
        <uni-popup ref="popup" background-color="#fff" @change="change">
            <view class="popup-content" :style="containerStyle">
                <div class="title flexStyleBetween">
                    <div class="name">
                        {{title}}
                    </div>
                    <div class="closeBox flexStyle"  @click="close">
                        <uni-icons type="closeempty" size="24"></uni-icons>
                    </div>
                </div>

                <div class="content">
                    <div class="body" :style="contentStyle" v-html="content"></div>
                </div>

                <div class="footer flexStyle">
                    <button type="primary" @click="close" class="myCloseBtn">关闭</button>
                </div>

            </view>
        </uni-popup>
    </div>
</template>

<script>
export default {
    props:{
        title:{
            type:String,
            default:`警告提示`
        },
        containerStyle:{
            type:String,
            default:`width: 450px`
        },
        contentStyle:{
            type:String,
            default:`` 
        }
    },
    data() {
        return {
            content:``
        }
    },
    methods: {
        close(){
            this.$refs.popup.close()
        },
        open(type,content){
            this.content=content;
            this.$refs.popup.open(type)
        }
    },
    components: {

    }
}
</script>

<style lang="stylus" scoped>
@import './index.styl';
</style>
